<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../../static/layui/css/layui.css"/>
  <link rel="stylesheet" href="../../static/css/common.css"/>
</head>
<body style="padding: 19px;">
<div id="app">
  <div class="search-div">
    <div class="layui-row" style="width: 100%;">
      <div class="layui-col-sm8">
        <div class="search-inline">
          <input type="text" class="layui-input search-input" v-model="state.blurry" placeholder="请输入菜单名称">
          <button type="button" class="layui-btn layui-btn-sm" @click="getTableTree">查询</button>
        </div>
      </div>
      <div class="layui-col-sm4">
        <div style="text-align: right;">
          <button v-if="hasPer('menu:edit')" type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="editMenu">新增</button>
        </div>
      </div>
    </div>
  </div>
  <table id="menu"></table>
</div>
</body>
<script src="../../static/layui/layui.js"></script>
<script src="../../static/js/axios.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/vue3.js"></script>
<script src="../../static/js/common.js"></script>
<script>
  const app = {
    setup(){
      const state = Vue.reactive({
        blurry: ''
      })

      Vue.onMounted(() => {
        getTableTree()
      })

      const getTableTree = () =>{
        get('/api/sys/menu/table/tree', {blurry: state.blurry}).then(res => {
          if (res.success){
            Vue.nextTick(() => {
              layui.use(function () {
                const treeTable = layui.treeTable
                renderTable(treeTable, res.data)
              })
            })
          }
        })
      }

      const renderTable = (treeTable, data) =>{
        treeTable.render({
          elem: '#menu',
          height: 'full-70',
          tree: {
            iconIndex: 2,
            isPidData: true,
            idName: 'id',
            pidName: 'parentId',
            data: {
              isSimpleData: true
            }
          },
          cols: [[
            { field: 'id', title: 'ID', hide: true},
            { field: 'parentId', title: '父级ID', hide: true},
            { field: 'name', title: '菜单名称'},
            { field: 'path', title: '菜单路径'},
            { field: 'type', title: '菜单类型', width: 120, templet: function (d) {
                if (d.type === '1'){
                  return '菜单'
                } else if (d.type === '2'){
                  return '页面'
                } else if (d.type === '3'){
                  return '按钮'
                }
              }},
            { field: 'permission', title: '权限标识', width: 120,},
            { field: 'sort', title: '排序', width: 120,},
            { field: 'option', title: '操作', align: 'center', width:120, templet: function (d) {
              let editHtml = ''
              let delHtml = ''
              if (hasPer('menu:edit')){
                editHtml = '<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>'
              }
              if (hasPer('menu:del')){
                delHtml = '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>'
              }
              return editHtml + delHtml
              }},
          ]],
          data: data,
        })

        treeTable.on('tool(menu)', function (obj) {
          if (obj.event === 'edit'){
            editMenu(obj.data)
          } else if (obj.event === 'del'){
            delMenu(obj.data.id)
          }
        })
      }

      const editMenu = (data) =>{
        layer.open({
          type: 2,
          title: '编辑菜单',
          area: ['800px', '400px'],
          content: 'edit.html',
          success: function (layero, index) {
            const iframeWin = window[layero.find('iframe')[0]['name']]
            //  将data传到子页面
            iframeWin.getParentData(data)
          }
        })
      }

      const delMenu = (id) =>{
        layer.confirm('确认删除菜单？', {
          btn: ['确认', '取消']
        }, function () {
          remove('/api/sys/menu/del', {id: id}).then(res => {
            if (res.success){
              successMsg(res.data)
              getTableTree()
            } else {
              errorMsg(res.msg)
            }
          })
        }, function () {
          infoMsg('操作已取消')
        })
      }

      return {
        state,
        getTableTree,
        editMenu,
        delMenu,
        hasPer
      }
    }
  }
  const vue = Vue.createApp(app).mount('#app')

  //  子页面调用方法
  function getChild(){
    vue.getTableTree()
  }
</script>
<style>
  .ew-tree-table{
    height: calc(100vh - 70px)
  }
</style>
</html>